<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{ msg }}</p>
    </div>

    <script src="../vue.js"></script>
    <script>
      // 生命周期：
      //    从 app 对象创建出来到销毁以及中间的各个阶段
      //    Vue给我们提供了到达这些阶段时的回调函数配置
      var app = new Vue({
        el: '#app',
        data: {
          msg: 'heheda',
        },
        beforeCreate() {
          console.log('beforeCreate-创建前');
        },
        created() {
          console.log('created-创建后');
        },
        beforeMount() {
          console.log('beforeMount-挂载前');
        },
        mounted() {
          console.log('mounted-挂载后');
        },
        beforeUpdate() {
          console.log('beforeUpdate-更新前');
        },
        updated() {
          console.log('updated-更新后');
        },
        beforeDestroy() {
          console.log('beforeDestroy-销毁前');
        },
        destroyed() {
          console.log('destroyed-销毁后');
        },
      });
    </script>
  </body>
</html>
